<template>
    <div class="login_dialog">
        <div class="ivu-modal-content">
            <div class="ivu-modal-header">
                <div class="ivu-modal-header-inner">账户登陆</div>
            </div>
            <div class="ivu-modal-body">
                <div class="login_item">
                    <span>用户名：</span>
                    <Input v-model="username" placeholder="username" style="width: 300px"/>
                </div>

                <div class="login_item">
                    <span>密码：</span>
                    <Input v-model="password" placeholder="password" style="width: 300px"/>
                </div>
            </div>
            <div class="ivu-modal-footer">
                <Button type="primary" @click="handleLogin">登陆</Button>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'LoginDialog',
    props: {
      msg: String
    },
    data() {
      return {
        username: '',
        password: '',
      }
    },
    created() {
      let status = localStorage.getItem('login')
      if (status === '1') {
        this.$router.replace('/index')
      }
    },
    methods: {
      handleLogin() {
        if (this.username === 'admin' && this.password === 'admin') {
          console.log(234)
          this.$Message['success']({
            background: false,
            content: '登陆成功'
          });
          localStorage.setItem('login', '1')

          setTimeout(() => {
            // todo: 跳转
            this.$router.replace('/index')
          }, 1000)
        } else {
          this.$Message['error']({
            background: true,
            content: '用户名、、密码错误'
          });
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .login_dialog {
        padding: 20px;
        width: 450px;
        height: 300px;

        .login_item {
            padding-bottom: 20px;
            display: flex;

            span {
                min-width: 80px;
                text-align: left;
            }
        }
    }
</style>
